import {useNavigate,useParams,useSearchParams} from 'react-router-dom'
import {Outlet} from 'react-router'
export function Home(){
    const navigate = useNavigate()
    return<>
        <Outlet></Outlet>
        <ul>
            <li onClick={()=>navigate('/home')}>首页</li>
            <li onClick={()=>navigate('/home/classify')}>分类</li>
            <li onClick={()=>navigate('/home/discover')}>发现</li>
            <li onClick={()=>navigate('/home/my/:id')}>我的</li>
        </ul>
    </> 

}
export function Classify(){
    return <div>ID:</div>
}
export function Discover(){
    return <div>发现</div>
}
export function My(){
    const navigate = useNavigate()
    return <div>
        <button onClick={()=>navigate('/home/my/:id/son')}>first</button>
        <button onClick={()=>navigate('/home/my/:id/son2')}>second</button>
        <Outlet></Outlet>
    </div>
}
export function Son(){
    const {id} = useParams()
    return <div>ID{id}</div>
}
export function Son2(){
    const [getParams,setParams]=useSearchParams()
    return <div>title:{getParams.getAll('title')}</div>
}